<template>
  <div class="PayNoticeAPP" @click="FalsePwd">
    <div class="PayNotice" :class="HeightCheck?'PayNoticeTrue':'PayNoticeFalse'" ref='Pay'>
      <div class="PayNotice-Header">
        <!-- 儿童信息 -->
        <div class="PayNotice-Info">
          <span>{{Info.classname}}</span>
          <span>{{Info.name}}</span>
        </div>
        <div class="PayNotice-Header-Title">
          {{Detail.title}}
        </div>
        <div class="PayNotice-Header-Money">
          {{Detail.actual_payment | Money}}元
        </div>
        <div class="PayNotice-Header-Time">
          {{Detail.content}}
        </div>
      </div>
      <div class="PayNotice-Margin"></div>
      <div class="PayNotice-Mx">
        <div class="Mx-Title">消费明细</div>
        <div class="Mx-Body">
          <div v-for="item in Detail.wage_detail">
            <span>{{item.option}}</span>
            <span>{{item.wage | Money}}元</span>
          </div>
        </div>
      </div>
      <div class="PayNotice-Margin"></div>
      <div class="PayNotice-Body">
        <!-- <div class="PayNotice-Body-Balance">
          <div class="PayNotice-Body-Balance-title" id="tete">
            账户余额:
          </div>
          <div class="PayNotice-Body-Balance-cont">
            3000.00元
          </div>
        </div> -->
        <div class="PayNotice-Body-Pay">
          <div class="PayNotice-Body-Balance-title">
            缴纳额度:
          </div>
          <div class="PayNotice-Body-Balance-cont">
            {{Detail.payment| Money}}元
          </div>
        </div>


        <div class="PayNotice-Body-Mode" v-if='GetRouter.type==1'>
          <div class="PayNotice-Body-Balance-title">
            <!-- 付款方式: -->
            付款方式
          </div>
          <div class="PayNotice-Body-Balance-cont">
            <!-- <div class="PayNotice-Body-Balance-cont-item" :style="{'background-image':BankState ? 'url(static/img/Index/pay1.png)':'url(static/img/Index/pay.png)'}"
              @click="BankItem()">

              <div class="PayNotice-Body-Balance-cont-item-icon">
                <img src="static/img/Index/card.png" width="100%" />
              </div>
              <div class="PayNotice-Body-Balance-cont-item-explain">
                银行卡
              </div>

            </div> -->

            <div class="PayNotice-Body-Balance-cont-item" :style="{'background-image':WxState ? 'url(static/img/Index/pay1.png)':'url(static/img/Index/pay.png)'}"
              @click="WxItem()">

              <div class="PayNotice-Body-Balance-cont-item-icon">
                <img src="static/img/Index/weixin.png" width="100%" />
              </div>
              <div class="PayNotice-Body-Balance-cont-item-explain">
                微信支付
              </div>

            </div>

          </div>
        </div>
        <div class="PayNotice-Body-Pay" v-else>
          <div class="PayNotice-Body-Balance-title">
            支付方式:
          </div>
          <div class="PayNotice-Body-Balance-cont">
            {{Detail.ncpayment}}
          </div>
        </div>
        <div class="PayNotice-Body-Notice">
          *如选择“委托代扣”，请确保账户有充足余额
        </div>
      </div>
      <div class="PayNotice-Tips" v-if='GetRouter.type==1'>
        输入支付密码
      </div>
      <div class="PayNotice-Tips2" v-else>
        本次费用已缴清
      </div>

      <div class="PayNotice-Input" v-if='GetRouter.type==1' @click.stop="IptPwd">
        <PassWord :top="true" v-on:Topnum="GetTopNum" ref='pwd'></PassWord>
      </div>

      <div class="PayNotice-Time" v-else>
        扣费时间:{{Detail.publish_time}}
      </div>

      <div class="PayNotice-Confirm" v-if='GetRouter.type==1' @click="payConfig()">
        <button>确认支付</button>
      </div>

      <div class="PayNotice-Confirm" v-else>
        <button @click="GoToIndex()">返回</button>
      </div>

    </div>
    <transition name="fade">
      <Message :mes="mes" :check='TdChecked' v-on:check="check1"></Message>
    </transition>
    <Key ref='Key'></Key>
  </div>
</template>

<script>
  import PassWord from '@/assets/assembly/PassWord'
  import Message from '@/assets/assembly/Message'
  import Key from '@/assets/assembly/Key';
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'PayNotice',
    data() {
      return {
        WxState: true,
        BankState: false,
        TopNum: 0,
        PayState: false,
        TdChecked: false,
        mes: '请输入密码',
        HeightCheck: false,
        GetRouter: {},
        Detail: '',
        Info: '',
        paysu: ''
      }
    },
    created: function () {


      this.$alloylever.config({
        cdn: '//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole的CDN地址
        reportUrl: "//a.qq.com", //错误上报地址
        reportPrefix: 'qun', //错误上报msg前缀，一般用于标识业务类型
        reportKey: 'msg', //错误上报msg前缀的key，用户上报系统接收存储msg
        otherReport: { //需要上报的其他信息
          uin: 491862102
        },
        entry: "#tete" //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
      })
      // var Notice = sessionStorage.getItem('Notice');
      // this.GetRouter = JSON.parse(Notice)
      this.GetRouter = this.$route.query;
      this.Notice();
      this.NoticeStu(this.GetRouter.view);
    },
    components: {
      PassWord,
      Message,
      Key
    },
    methods: {
      IptPwd() {
        this.HeightCheck = true;
        this.$refs.Key._data.BottomStu = this.HeightCheck;
        this.$refs.Pay.scrollTop = this.$refs.Pay.scrollHeight;
        this.$refs.pwd.Pwd = ''
      },
      FalsePwd() {
        this.HeightCheck = false;
        this.$refs.Key._data.BottomStu = this.HeightCheck;
      },
      BankItem() {
        this.BankState = true;
        this.WxState = false;
      },
      WxItem() {
        this.BankState = false;
        this.WxState = true;
      },
      GetTopNum: function (Num) {
        this.TopNum = Num
      },
      TdCheckFalse() {
        this.TdChecked = false
      },
      GoToSuccess() {
        if (!this.HeightCheck) {
          if (!this.WxState && !this.BankState) {
            this.TdChecked = true
            this.mes = "请选择支付方式"
          } else if (this.$refs.pwd.Pwd.length < 6) {
            this.TdChecked = true
            this.mes = "请输入密码"
          } else {
            // //this.BankState 为true银行卡支付
            // //this.WxState 为true微信你支付
            // this.$router.push({
            //   path: `/PaySuccess`
            // })
          }
        }
        //密码
        //				console.log(this.$refs.pwd.Pwd)

      },
      //子组件传来的值。用于关闭
      check1(e) {
        this.TdChecked = e
      },
      GoToIndex() {
        this.$router.push({
          path: this.$router.go(-1)
        })
      },
      // 获取通知详情
      Notice() {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });

        this.$ApiCom.NoticeDetail(this.GetRouter.childrenid, this.GetRouter.id, this.GetRouter.type).then(function (res) {
            if (res.data.errCode == 1001) {
            Indicator.open({
              text: '登陆失效...',
            });
            localStorage.clear();
            setTimeout(() => {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000);
          } else if (res.data.errCode == 1002) {
            Indicator.open({
              text: '授权失效...',
            });
            // 加密路径，回调路径
            var IndexInfo = encodeURIComponent(window.location.href);
            // 获取sessionId
            var sessionId = sessionStorage.getItem('sessionId');
            setTimeout(() => {
              Indicator.close();
              // 授权
              location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                '&&sessionId=' + sessionId;
            }, 1000);
          } else if (res.data.errCode == 0) {
            Indicator.close();
            vm.Detail = res.data.data.noticeDetail;
            vm.Info = res.data.data.noticeDetail;
            // 设置是否缴费成功
            vm.Detail.status == 0 ? vm.GetRouter.type = 1 : vm.GetRouter.type = 2;
          } else {
            Indicator.open({
              text: res.errMsg,
            });
            setTimeout(() => {
              Indicator.close();
              vm.$router.push({
                path: `/Index`
              })
            }, 1000);
          }

        }, function (err) {
          //   响应超时
          Indicator.close();
          Toast({
            message: '响应超时，请重试',
            duration: 1000
          });
          setTimeout(() => {
            Indicator.close();
            vm.$router.push({
              path: `/PayNotice`
            })
          }, 1000);
        })
      },
      //   阅读状态
      NoticeStu(view) {
        if (view == 0) {
          this.$ApiCom.ParentIsViewNotice(this.GetRouter.childrenid, this.GetRouter.id, this.GetRouter.type).then(
            function (res) {

            })
        }
      },
      // 配置微信支付JDK
      payConfig() {
        var vm = this;
        if (!this.HeightCheck) {
          if (!this.WxState && !this.BankState) {
            this.TdChecked = true
            this.mes = "请选择支付方式"
          } else if (this.$refs.pwd.Pwd.length < 6) {
            this.TdChecked = true
            this.mes = "请输入密码"
          } else {
            Indicator.open({
              text: '发起支付中...',
            });
            vm.$wx.ready(function () {
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
              vm.$ApiCom.Order(vm.GetRouter.id, vm.$refs.pwd.Pwd).then(function (res) {
                if (res.data.errCode == 1001) {
                  Indicator.open({
                    text: '登陆失效...',
                  });
                  localStorage.clear();
                  setTimeout(() => {
                    Indicator.close();
                    var Sid = localStorage.getItem('Sid');
                    vm.$router.push({
                      path: `/Login`
                    })
                  }, 1000);
                } else if (res.data.errCode == 1002) {
                  Indicator.open({
                    text: '授权失效...',
                  });
                  // 加密路径，回调路径
                  var IndexInfo = encodeURIComponent(window.location.href);
                  // 获取sessionId
                  var sessionId = sessionStorage.getItem('sessionId');
                  setTimeout(() => {
                    Indicator.close();
                    // 授权
                    location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' +
                      IndexInfo +
                      '&&sessionId=' + sessionId;
                  }, 1000);
                } else if (res.data.errCode == 0) {
                  var WxData = res.data.data;
                  Indicator.close();
                  vm.$wx.chooseWXPay({
                    timestamp: WxData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: WxData.nonceStr, // 支付签名随机串，不长于 32 位
                    package: WxData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: WxData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: WxData.paySign, // 支付签名
                    success: function (res) {
                      Indicator.open({
                        text: '支付成功,请稍后',
                      });
                      sessionStorage.setItem('money', vm.Detail.actual_payment);

                      setTimeout(() => {
                        Indicator.close();
                        vm.$router.push({
                          path: `/PaySuccess`
                        })
                      }, 2000);
                      // 支付成功后的回调函数  
                    }
                  });
                } else {
                  Indicator.close();
                  Indicator.open({
                    text: res.data.errMsg,
                  });
                  setTimeout(() => {
                    Indicator.close();
                  }, 1000);
                }

              })
            });

          }
        }

      },
      // 微信配置
      GetWx: function () {
        var vm = this
        var ref = encodeURIComponent(window.location.href.split('#')[0]);
        console.log('ref' + window.location.href.split('#')[0])
        this.$ApiCom.Wx(ref).then(function (res) {
          var data = res.data.data
          vm.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用d的JS接口列表
          });
        })
      },
    },
    mounted() {
      var vm = this;
      this.bus.$on('BottomStu', function (BottomStu) {
        vm.HeightCheck = BottomStu
      })
      this.GetWx();
    },
    filters: {
      Money(Money) {
        return Number(Money).toFixed(2);
      }
    }
  }

</script>

<style scoped>
  @import url("css/PayNotice.css");

</style>
